<template>
  <div>
    <div class="hot-recommend">热门推荐</div>
    <ul>
      <router-link tag="li" class="view-recommend border-bottom" v-for="item in list" :key="item.id" :to="'/detail/' + item.id">
        <img class="view-img" :src="item.imgUrl" />
        <div class="content-wraper">
          <p class="content-title">{{item.title}}</p>
          <p class="content-desc">{{item.desc}}</p>
          <button class="content-detail">{{item.detail}}</button>
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  props: {
    list: Array
  },
  data () {
    return {
      imgList: [
        {
          id: '001',
          imgUrl: 'https://imgs.qunarzz.com/p/tts9/1612/b1/8aafa67d247cd502.jpg_r_75x50x90_fee69cc5.jpg',
          title: '大连发现王国大连发现王国大连发现王国大连发现王国大连发现王国',
          desc: '这里从满无穷的乐趣这里从满无穷的乐趣这里从满无穷的乐趣',
          detail: '查看详情'
        },
        {
          id: '002',
          imgUrl: 'https://imgs.qunarzz.com/p/tts4/1612/1c/fcae6a861f3d4402.jpg_r_75x50x90_242f32e0.jpg',
          title: '金石滩',
          desc: '中国的黄金海岸',
          detail: '查看详情'
        },
        {
          id: '003',
          imgUrl: 'https://imgs.qunarzz.com/p/tts5/1706/f5/6f810b34cf96a302.jpg_r_75x50x90_b8360b21.jpg',
          title: '老虎滩',
          desc: '这里从满无穷的乐趣',
          detail: '查看详情'
        }
      ]
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/minix.styl'
  .hot-recommend
    line-height: 0.4rem
    text-indent: 0.1rem
    background: #ccc
    margin-top: 0.1rem
  .view-recommend
    display: flex
    overflow: hidden
    height: 1.9rem
    .view-img
      width: 1.7rem
      height: 1.7rem
      padding: 0.1rem
    .content-wraper
      flex: 1
      padding: 0.1rem
      min-width: 0
      .content-title
        line-height: 0.54rem
        font-size: 0.32rem
        ellipsis()
      .content-desc
        line-height: 0.4rem
        color: #ccc
        ellipsis()
      .content-detail
        line-height: 0.44rem
        border-radius: 0.1rem
        padding: 0.1rem
        margin-top: 0.16rem
        background: #ff9300
        color: #fff
        ellipsis()
</style>
